<template>
  <div>
    <LoginFormTitle v-show="showed" class="enter-x" />
    <Form
      class="p-4 enter-x"
      :model="formData"
      :rules="formRules"
      ref="formRef"
      v-show="showed"
      @keydown.enter="handleLogin"
    >
      <FormItem name="username" class="enter-x">
        <Input
          size="large"
          v-model:value="formData.username"
          :placeholder="t('sys.login.userName')"
          class="fix-auto-fill"
        />
      </FormItem>
      <FormItem name="password" class="enter-x">
        <InputPassword
          size="large"
          visibilityToggle
          v-model:value="formData.password"
          :placeholder="t('sys.login.password')"
        />
      </FormItem>
      <ARow :gutter="0">
        <ACol :span="16">
          <FormItem name="captcha">
            <AInput
              size="large"
              v-model:value="formData.captcha"
              :placeholder="t('sys.login.smsPlaceholder')"
              class="fix-auto"
              style="min-width: 310px"
            />
          </FormItem>
        </ACol>
        <ACol :span="8" style="text-align: right">
          <img :src="captchaBase64" @click="refreshCaptcha" alt="" width="105" height="40" />
        </ACol>
      </ARow>
      <ARow class="enter-x">
        <ACol :span="12">
          <FormItem>
            <!-- No logic, you need to deal with it yourself -->
            <Checkbox v-model:checked="formData.rememberMe" size="small">
              {{ t('sys.login.rememberMe') }}
            </Checkbox>
          </FormItem>
        </ACol>
        <ACol :span="12">
          <FormItem :style="{ 'text-align': 'right' }">
            <!-- No logic, you need to deal with it yourself -->
            <Button type="link" size="small" @click="resetPassword">
              {{ t('sys.login.forgetPassword') }}
            </Button>
          </FormItem>
        </ACol>
      </ARow>

      <FormItem class="enter-x">
        <Button type="primary" size="large" block @click="handleLogin" :loading="loading">
          {{ t('sys.login.loginButton') }}
        </Button>
      </FormItem>
    </Form>
  </div>
</template>
<script lang="ts" src="./login.form.ts" />
